@font-face {
    font-family: 'din_light';
    src: url('../fonts/din_light_2-webfont.eot');
    src: url('../fonts/din_light_2-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/din_light_2-webfont.woff') format('woff'),
         url('../fonts/din_light_2-webfont.ttf') format('truetype'),
         url('../fonts/din_light_2-webfont.svg#din_lightregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'din_regular';
    src: url('../fonts/DINPRO-REGULAR.eot');
    src: url('../fonts/DINPRO-REGULAR.eot?#iefix') format('embedded-opentype'),
         url('../fonts/DINPRO-REGULAR.woff') format('woff'),
         url('../fonts/DINPRO-REGULAR.ttf') format('truetype'),
         url('../fonts/DINPRO-REGULAR.svg#din_mediumregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/*------------------------------------/
/ VARIABLES
/*-----------------------------------*/
@color_text: #333333;
@color_light_blue: #1BBCD9;
@color_yellow: #1BBCD9;
@color_white: #FFFFFF;
@font_size: 16px;


/*------------------------------------/
/ GENERAL
/*-----------------------------------*/
body{
    font-family: 'din_regular', sans-serif;
    font-size: @font_size;
    padding-top: 40px;
}
h1{
    background-color: @color_light_blue;
    font-size: 30px;
    font-family: 'din_light', sans-serif;
    margin: 0 0 15px 0;
    padding: 3px 5px;
    text-transform: uppercase;
    width: 340px;
}
.alignCenter{text-align: center;}
.alignLeft{text-align: left;}
.alignRight{text-align: right;}
.clear{clear: both;}
.margin_bottom10{margin-bottom: 10px;}
.margin_top(@size: 0){
    margin-top: @size;
}
.margin_bottom(@size: 0){
    margin-bottom: @size;
}
.selectable_item{
    cursor: pointer;
}
#main{
    margin-top: 35px;
}

.border_light_blue{border: solid @color_light_blue 2px;}
.btn_light_blue{
    background-color: @color_light_blue;
    border: none;
    font-size: 20px;
    font-family: 'din_light', sans-serif;
    font-weight: normal;
    padding: 10px 5px;
    text-align: center;
    width: 180px;
}
.selectList{
    height: 300px;
    margin: 0 0 10px 0;
    overflow-y: scroll;
    padding: 0;

    li{
        font-size: 14px;
        list-style: none;
        margin: 0;
        padding: 0;

        a{
            color: @color_text;
            display: block;
            padding: 3px 10px 3px 25px;
            .clear;

            &.active{
                background-color: #EBEBEB;
                font-weight: bold;
                text-decoration: none;

                .file_opts{
                    display: inline-block;
                }
            }

            &:hover{
                background-color: #EBEBEB;
                text-decoration: none;
            }

            .file_name{
                display: inline-block;
                vertical-align: middle;
                width: 60%;
            }
            .file_opts{
                display: none;
                vertical-align: middle;
                width: 35%;

                .showQuestions{
                    color: @color_light_blue;
                    display: inline-block;
                    font-weight: normal;

                    &:hover{
                        text-decoration: underline;
                    }
                }
            }           
        }
    }
}
.bullet_ok{
    background-image: url('../img/icon-ok.png');
    background-position: 5px;
    background-repeat: no-repeat;
}
.bullet_warning{
    background-image: url('../img/icon-warning.png');
    background-position: 5px;
    background-repeat: no-repeat;
}
.bullet_error{
    background-image: url('../img/icon-error.png');
    background-position: 5px;
    background-repeat: no-repeat;
}

.buttons_actions{
    .margin_top(20px);
}

.search_box{
    border: solid @color_light_blue 1px;

    form{
        margin: 0;
    }

    #search_question{
        border: none;
        box-shadow: none;
        margin: 5px 0 0 0;
        width: 230px;

        &.searched{
            width: 215px;
        }
    }

    .btn_search{
        font-size: 14px;
        float: right;
        width: 50px;
    }

    .reset_search{
        cursor: pointer;
        margin: 5px 0 0 0;
    }
}

/*------------*/


.body-content-create {
    background-color: #F5F5F5;
    padding-left: 10px;
    border-radius: 15px;
    margin-top:60px;
}
.cursor-style {
    cursor : pointer;
}
.body-content-buckets {
    background-color: #F5F5F5;
    margin-top: 60px;
    margin-left: 10px;
    border-radius: 5px;
}

.btn_remove_bucket{
    opacity: 0;
}

.bucket:hover .btn_remove_bucket{opacity: 1;}

.btn_remove_object{
    opacity: 0.3;
}
.object:hover .btn_remove_object{opacity: 1;}

/*---- TABLE STYLES ----*/
#row{
    .btn_actions{
        text-align: center;

        button{
            opacity: 0.3;
            padding: 2px 0;
        }
    }

    tr:hover{
        .btn_actions{
            button{
                opacity: 1;
            }
        }
    }
}

/*------------------------------------/
/ INPUT SELECTION
/*-----------------------------------*/
#input_container{
    input{
        margin-top:10px;
    }
    button{
        margin-left:10px;
    }
    #img_loader{
        margin-left:10px;
    }
}


/*------------------------------------/
/ QUESTIONS
/*-----------------------------------*/
#questions{
    margin: 0;
    padding: 0;
}

#modalFiles{
    select{
        font-size: 16px;
        height: 300px;

        option:disabled{
            color: rgb(215, 215, 215);
        }
    }
    .moveFilesBtns button{
        margin-bottom: 5px;
    }
}

#main{
    .sep{
        height: 50px;
    }
}

.ui-widget button{
    font-family: 'din_regular', sans-serif;
    font-size: 16px;
}

/*------------------------------------/
/ SUMMARY
/*-----------------------------------*/
.summary_info{
    padding: 15px 35px;
    font-size: 12px;
    width: 200px;
    margin: 0 auto;
}
ul.question_list{
    font-size: @font_size - 2;
    margin:0;
    padding:0;

    
    li{
        margin:0;
        padding:5px 5px 5px 25px;
        list-style:none;


        .bullet_ok,
        .bullet_warning,
        .bullet_error{
            background-position: 5px 8px;
        }
    }
}
.bold_style{
    font-weight:bold;
}
/*------------------------------------/
/ SOLVE CONFLICTS
/*-----------------------------------*/
.solveConflicts{
    .selectQuestion{
        li{
            a{
                padding-left: 10px;
                padding-right: 25px;
                background-image: url('../img/check_gray.png');
                background-position: 98% center;
                background-repeat: no-repeat;

                &.active{
                    background-image: url('../img/check_yellow.png');
                }
            }
        }
    }

    .sep{
        height: 50px;
    }
}



/*------------------------------------/
/ BREADCRUMB
/*-----------------------------------*/
#breadcrumbs-two{
    overflow: hidden;
    margin: 0 0 30px 0;
}

#breadcrumbs-two li{
    float: left;
    list-style: none;
    margin: 0 .5em 0 1em;
}

#breadcrumbs-two a{
    background: #ddd;
    padding: .7em 1em;
    float: left;
    text-decoration: none;
    color: #444;
    text-shadow: 0 1px 0 rgba(255,255,255,.5); 
    position: relative;
}

#breadcrumbs-two a::before{
    content: "";
    position: absolute;
    top: 50%; 
    margin-top: -1.5em;   
    border-width: 1.5em 0 1.5em 1em;
    border-style: solid;
    border-color: #ddd #ddd #ddd transparent;
    left: -1em;
}


#breadcrumbs-two li:first-child{margin-left: 0;}
#breadcrumbs-two li:first-child a::before{border: none;}

#breadcrumbs-two a::after{
    content: "";
    position: absolute;
    top: 50%; 
    margin-top: -1.5em;   
    border-top: 1.5em solid transparent;
    border-bottom: 1.5em solid transparent;
    border-left: 1em solid #ddd;
    right: -1em;
}

#breadcrumbs-two a.current{
    background: @color_light_blue;
}
#breadcrumbs-two a.current::before{
    border-color: @color_light_blue @color_light_blue @color_light_blue transparent;
}
#breadcrumbs-two a.current::after{
    border-left-color: @color_light_blue;
}


/*------------------------------------/
/ LOGIN PAGE
/*-----------------------------------*/
#login_container{    
    border: solid @color_light_blue 2px;
    padding: 30px 60px;

    h2{
        font-size: 18px;
        font-weight: normal;
        line-height: 18px;
        margin: 0 0 10px 0;
        text-transform: uppercase;
    }

    .login_container{
        border-right: solid @color_light_blue 1px;
    }
    .login_form{
        padding: 0 60px 0 0;

        form{
            margin: 0;
        }
    }

    label{
        color: @color_light_blue;
    }

    input{
        border: solid @color_light_blue 1px;
        border-radius: 0;
        padding: 5px 2%;
        width: 96%;
    }

    .forgot{
        a{
            color: @color_light_blue;
        }
    }

    .btn_container{
        margin: 40px 0 20px 0;
    }

    .btn_form{
        background: @color_light_blue;
        border: solid @color_light_blue 1px;
        border-radius: 0;
        box-shadow: none;
        color: @color_white;
        text-shadow: none;
        padding-bottom: 5px;
        padding-top: 5px;
        width: 100%;
    }

    .register_container{
        padding: 0 0 0 40px;
    }
}